@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';
@import './modules/protect.scss';
body{
    width: 100%;
    background-color: #FAFAFA;
}
.wrap{
    .lunbo{
        // margin: auto;
        width: 100%;
        height: 680px;
        // position: relative;80
        // overflow: hidden;
        margin-bottom: 50px;
        img{
            width: 100%;
            height: 100%;
        }
        // img{
        //     width: 2440px;
        //     height: 680px;
        //     // display: none;
        //     position: absolute;
        //     left: -500px;
           
        // }
        img.show{
            display: block;
            // width: 100%;
        }
        // .bar{
        //     width: 300px;
        //     height: 20px;
        //     // background-color: white;
        //     position: absolute;
        //     left: 0;
        //     right: 0;
        //     margin: auto;
        //     top: 95%;
        //     .bar1,.bar2,.bar3{
        //         float: left;
        //         width: 70px;
        //         height: 10px;
        //         margin: 5px 15px;
        //         background-color: #ccc;
        //         opacity: 0.3;
        //         border-radius: 10px;
        //     }
        //     .show{
        //         opacity: 1;
        //     }

        // }
    }
}
main{
    width: 1074px;

    min-height: 1000px;
    margin: auto;
    // background-color: yellow;
    // 黑鲨3
    div.product-4{
        width: 100%;
        min-height: 395px;
        overflow: hidden;
        // background-color: pink;
        position: relative;
        margin-bottom: 0px;
        button{
            width: 100px;
            height: 30px;
            position: absolute;
            top: 5px;
            border: 0;
            background-color: rgba(0,198,94,0.7);
            color: black;
            border-radius: 5px;
        }
        .orderUp{
            left: 60%;
        }
        .orderDown{
            left: 75%;
        }
        p{
            font-size: 18px;
            color: #333333;
            margin-bottom: 20px;
            margin-left: 20px;
        }
        ul.content-list{
            // position: absolute;
            // bottom: 0;
            width: 100%;
            height: 356px;
            overflow: hidden;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-content: flex-start;
            // background-color: orange;
            a{
                width: 24%;
                li{
                    width: 100%;
                    height: 336px;
                    // background-color: orange;
                    box-sizing: border-box;
                    padding: 10px;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    background-color: white;
                    margin-bottom: 20px;
                    span.new{
                        border: 1px solid rgba(0,198,94,0.7);
                        background-color: rgba(0,198,94,0.08);
                        font-size: 12px;
                        font-style: normal;
                        color: #00c65e;
                        position: absolute;
                        top: 20px;
                        left: 20px;
                        padding: 2px 5px;
                    }
                    img{
                        width: 140px;
                        height: 140px;
                        margin-top: 52px;
                    }
                    div{
                        height: 46px;
                        width: 200px;
                        // display: flex;
                        // flex-direction: column;
                        span{
                            text-align: center;
                            width: 200px;
                            height: 20px;
                            display: inline-block;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;
                        }
                        span:nth-child(1){
                            font-size: 14px;
                            color: #333333;
                        }
                        span:nth-child(2){
                            font-size: 12px;
                            color: #999999;
                        }
                    }
                    p{
                        font-size: 15px;
                        color: #00c65e;
                        margin-top: 12px;
                        text-align: center;
                    }
                    
                }
            }
            
        }
        span.viewMore{
            position: absolute;
            right: 0;
            bottom: 0px;
            font-size: 16px;
            color: #333333;
            line-height: 18px;
            cursor: pointer;
            display: inline-block;
            
        }  
    }
}

